/*////////////////////////////////////////////////////////////////////////////
* page::header
////////////////////////////////////////////////////////////////////////////*/
    .x-header .navbar-default{display: flex; align-items: center; height: 80px; padding:0 30px; border-bottom: 1px solid #E6E6E6; background: #fff; color: white;}
    .x-header .nav-left{max-width: 1680px;}
    .x-header .nav-left li{padding: 10px 24px; margin-right: 10px; float: left; text-align: center;}
    .x-header .nav-left .menu-selected{background:#f4f5f9;border-radius:4px;}
    .x-header .nav-left .menu-selected >a{color: #e33333 !important; font-weight: bold;}
    .x-header .nav-left .menu-selected .selected{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-color: white; opacity: .2;}
    .x-header .nav-inp{float: right; margin-top: 10px; margin-right: 40px; padding-left: 15px; width: 200px; height: 34px; border: 1px solid #e0e4ed; border-radius: 100px; background: #fcfcfe; font-size: 14px; color: #c9ced7;}
    .x-header .header-inp{position: relative; float: right;}
    .x-header .header-inp i{position: absolute; right: 54px; top: 17px; background: red; width: 18px; height: 18px; background-size: 100%; cursor: pointer;}
    .x-header .header-icon{width: 200px; height: 45px; float: left; margin-right: 84px;}
    .x-header .header-icon img{width: 100%; height: 100%;}
    .x-header .header-icon .header-img{display: inline-block; position: absolute; width: 30px; height: 33px; top: 9px;}
    .x-header .header-icon .header-title{padding-left: 25px; height: 50px; font-size: 22px;}
/*////////////////////////////////////////////////////////////////////////////
* classname:: app layout
* included:: 2018-12-20 14:55:47
* modify:: 2019-1-8 10:36:25
////////////////////////////////////////////////////////////////////////////*/
    .app{position: relative; width: 100%; height: auto; min-height: 100%;}
    .app:before{position: absolute; top: 0; bottom: 0; z-index: -1; display: block; width: 100%; background-color: #f0f3f4; border: inherit; content: "";}

    .app.app-header-fixed{padding-top: 70px;}

    .app .app-header{border-radius: 0;}
    .app.app-header-fixed .app-header{position: fixed;top: 0;width: 100%;z-index: 1025;min-width: 1152px;}
    .mce-fullscreen .app-header{z-index: 0;}
    .app .app-header .app-navbar{height: 70px!important;padding-top: 0px; border-bottom: 1px solid #d6d6d6;background: #fff;box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05);}
    .app .app-header .app-navbar .navbar-nav span{font-size: 15px; color: #5c5c5c;}
    .app .app-header .app-navbar .navbar-nav > li > a{padding-bottom: 14px;}
    .app .app-header .app-navbar .navbar-nav > li > a > i{font-weight: 800; font-size: 20px; vertical-align: middle;}
    .app .app-header .app-navbar .dropdown-menu > li > a{ display: block; padding: 10px 20px;}
    .app .app-header .app-navbar .dropdown-menu > li > a:hover,
    .app .app-header .app-navbar .dropdown-menu > li > a:hover span,
    .app .app-header .app-navbar .dropdown-menu > li > a:focus,
    .app .app-header .app-navbar .dropdown-menu > .active > a,
    .app .app-header .app-navbar .dropdown-menu > .active > a:hover,
    .app .app-header .app-navbar .dropdown-menu > .active > a:focus{background-color: #e67067 !important; color:#fff;}

    .app .app-aside{float: left;background-color: #333;margin-top: -70px;}
    .app .app-aside:before{position: absolute;top: 0;bottom: 0;z-index: -1;width: inherit;background-color: inherit;border: inherit;content: "";}
    .app .app-aside .aside-wrap{width: 183px;overflow: hidden;}
    .app .app-aside .navi ul.nav li > a{color: #ddd;padding: 10px 10px 10px 25px;}
    .app .app-aside .navi ul.nav li > a > i{width: 26px;text-align:center;}
    .app .app-aside .navi ul.nav li > a > span{padding-left: 2px;}
    .app .app-aside .navi ul.nav li > a:hover,
    .app .app-aside .navi ul.nav li > a:focus{color: #fff;background-color: #6e646e;padding-left: 15px;border-left: 10px solid #F44336;}
    .app .app-aside .navi ul.nav li li a{padding: 5px 0px 5px 25px;position:relative;color: #aaa;}
    .app .app-aside .navi ul.nav li li a span:before{content: ">";width: 24px;margin-right:6px;display: inline-block;text-align:center;}
    .app .app-aside .navi ul.nav li li a .pointer {display:none}
    .app .app-aside .navi ul.nav li li.active a .pointer {display:block;position: absolute;right: 21px;top: 4px;}
    .app .app-aside .navi ul.nav li li.active a .pointer .arrowi,
    .app .app-aside .navi ul.nav li li.active a .pointer .arrowi_border { border-color: transparent #fff transparent transparent; border-width: 11px; border-style: solid; font-size: 0; left: 50%; line-height: 0; margin: 0 auto; position: absolute; top: 0; width: 0; z-index: 1002; left: 0; margin-left: 45%; }
    .app .app-aside .navi ul.nav li li.active a .pointer .arrowi_border { border-color: transparent rgb(192, 210, 221) transparent transparent; border-width: 11px; margin-left: -1px; border-style: solid; z-index: 1001; top: 0px; }
    .app .app-aside .navi ul.nav.nav-sub{padding: 0px 0px;}
    .app .app-aside .active ul.nav.nav-sub{padding: 10px 0px;overflow-x: hidden; border-top: 1px solid #676767; border-bottom: 1px solid #676767;}
    .app .app-aside .navi ul.nav.nav-sub > li div:hover > a,
    .app .app-aside .navi ul.nav.nav-sub > li:focus > a,
    .app .app-aside .navi ul.nav.nav-sub > li.active > a{color: #FFEB3B;background-color: #6e646e;}
    .app .app-aside .navi .navi-wrapper{padding:10px 0;}
    .app .app-aside .navi .navi-wrapper .avatar img{border: 1px solid #fff; background: #fff;margin-bottom:10px}

    .app .app-aside .text-active,
    .app .app-aside .active>.text,
    .app .app-aside .active>.auto .text { display: none !important; }
    .app .app-aside .active>.text-active,
    .app .app-aside .active>.auto .text-active { display: inline-block !important; }

    .app .app-aside-footer{position: absolute; bottom: 0; z-index: 1000; width: 100%; max-width: 200px;}
    .app .app-aside-footer ~ div{padding-bottom: 50px;}
    .app.app-aside-folded .app-aside-footer{max-width: 60px;}

    .app .app-aside-right{padding-bottom: 50px;}

    .app .settings{position: fixed; top: 220px; right: -240px; z-index: 1050; width: 240px; -webkit-transition: right 0.2s; transition: right 0.2s;}
    .app .settings.active{right: -1px;}
    .app .settings > .btn{position: absolute; top: -1px; left: -42px; padding: 10px 15px; background: #f6f8f8 !important; border-color: #dee5e7; border-right-width: 0;}
    .app .settings .i-checks span b{display: inline-block; float: left; width: 50%; height: 20px;}
    .app .settings .i-checks span b.header{height: 10px;}
    .app .settings .settingItem { margin-bottom: 10px; }

    .app .app-content{height: 100%;min-height: 600px;min-width: 900px;padding-bottom: 70px;}
    .app .app-content:before,
    .app .app-content:after{display: table; content: " ";}
    .app .app-content:after{clear: both;}
    .app .app-content-full{position: absolute; top: 50px; bottom: 50px; width: auto !important; height: auto; padding: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch;}
    .app .app-content-full.h-full{bottom: 0; height: auto;}
    .app .app-content .app-content-body{float: left;background: #fff;width: 100%;}

    .app .app-footer{position: absolute;right: 0;bottom: 0;left: 0;z-index: 1005; color: #58666e; background-color: #edf1f2; padding: 15px; border-top: 1px solid #dee5e7;}
    .app .app-footer.app-footer-fixed{position: fixed;}

    .app .panel_right{width: 240px;position: absolute;right: -240px;top: 0;height: auto;min-height: 200px;background: transparent;border: 0;}
    .app .panel_right.nonono{position: relative;right: 0;top: 0;display: block !important;z-index: 0;float: left;width: 100%;}
    .app .panel_right .panel-right-menu{overflow: hidden; }
    .app .panel_right .panel-right-menu ul{list-style-type: none; padding: 10px 10px 10px 10px; overflow: hidden; }
    .app .panel_right .panel-right-menu ul li{list-style-type: none; float: left; margin: 0 5px 8px 0; }
    .app .panel_right .panel-right-menu ul li a{}
    .app .panel_right .panel-right-menu ul li a:hover{text-decoration: none;}
    .app .panel_right .panel-right-menu ul li a label{white-space: normal;}
    .app .panel_right .panel-right-menu .iwantyou{width: 100%; height: 80px; line-height: 80px; font-size: 50px; text-align: center; border-top: 10px solid #352d35;}

    .app .panel_left{width: 220px;position: fixed;left: 50%;margin-left: -910px;bottom: 50px;height: auto;min-height: 200px;background: transparent;border: 0;z-index: 200;}
    .app .panel_left .panel-left-menu{background: transparent;}
    .app .panel_left .panel-left-menu ul{ padding: 0; }
    .app .panel_left .panel-left-menu ul li{list-style-type: none;height: 30px;line-height: 30px;padding: 0 10px;color: #767577;color: #fff;text-shadow:0 0 1px rgb(0, 0, 0);filter:glow(color=black, strength=5);}

    @media (max-width: 1900px){
        .app .panel_right{display:none;}
        .app .panel_left{display:none;}
    }
    /*****************************************************************************/
    .hbox{display: table; width: 100%; height: 100%; border-spacing: 0; table-layout: fixed;}
    .hbox .col{display: table-cell; float: none; height: 100%; vertical-align: top;}
    .vbox{position: relative; display: table; width: 100%; height: 100%; min-height: 240px; border-spacing: 0;}
    .vbox .row-row{display: table-row; height: 100%;}
    .vbox .row-row .cell{position: relative; width: 100%; height: 100%; overflow: auto; -webkit-overflow-scrolling: touch;}
    .ie .vbox .row-row .cell{display: table-cell;}
    .vbox .row-row .cell .cell-inner{position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
    /*****************************************************************************/
    @media (min-width: 768px){
        .app-aside,
        .navbar-header{width: 183px;}
        .navbar-collapse,
        .app-content,
        .app-footer{margin-left: 183px;}
        .app-aside-right{position: absolute; top: 50px; right: 0; bottom: 0; z-index: 1000;}
        .app-aside-right.pos-fix{z-index: 1010;}
        .visible-folded{display: none;}
        .app-aside-folded .hidden-folded{display: none !important;}
        .app-aside-folded .visible-folded{display: inherit;}
        .app-aside-folded .text-center-folded{text-align: center;}
        .app-aside-folded .pull-none-folded{float: none !important;}
        .app-aside-folded .w-auto-folded{width: auto;}
        .app-aside-folded .app-aside,
        .app-aside-folded .navbar-header{width: 60px;}
        .app-aside-folded .navbar-collapse,
        .app-aside-folded .app-content,
        .app-aside-folded .app-footer{margin-left: 60px;}
        .app-aside-folded .app-header .navbar-brand{display: block; padding: 0;}
        .app-aside-fixed .app-header .navbar-header{position: fixed;}
        .app-aside-fixed .aside-wrap{position: fixed;bottom: 0;left: 0;z-index: 1026;width: 203px;top:0;overflow: hidden;}
        .app-aside-fixed .aside-wrap .navi-wrap{position: relative;width: 183px;height: 100%;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: touch;}
        .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar{width: 0;height: 0;-webkit-appearance: none;}
        .app-aside-fixed .aside-wrap .navi-wrap::-webkit-scrollbar:vertical{width: 0px;}
        .smart .app-aside-fixed .aside-wrap .navi-wrap{width: 200px;}
        .app-aside-fixed.app-aside-folded .app-aside{position: fixed; top: 0; bottom: 0; z-index: 1010;}
        .app-aside-fixed.app-aside-folded .aside-wrap{width: 60px;}
        .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap{width: 77px;}
        .smart .app-aside-fixed.app-aside-folded .aside-wrap .navi-wrap{width: 60px;}
        .bg-auto:before{position: absolute; top: 0; bottom: 0; z-index: -1; width: inherit; background-color: inherit; border: inherit; content: "";}
        .bg-auto.b-l:before{margin-left: -1px;}
        .bg-auto.b-r:before{margin-right: -1px;}
        .col.show{display: table-cell !important;}
    }
    @media (min-width: 768px) and (max-width: 991px){
        .hbox-auto-sm{display: block;}
        .hbox-auto-sm > .col{display: block; width: auto; height: auto;}
        .hbox-auto-sm > .col.show{display: block !important;}
    }
    @media (max-width: 767px){
        .app-aside{float: none;}
        .app-content-full{width: 100% !important;}
        .hbox-auto-xs{display: block;}
        .hbox-auto-xs > .col{display: block; width: auto; height: auto;}
        .navbar-nav{margin-top: 0; margin-bottom: 0;}
        .navbar-nav > li > a{box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);}
        .navbar-nav > li > a .up{top: 0;}
        .navbar-nav > li > a .avatar{width: 30px; margin-top: -5px;}
        .navbar-nav .open .dropdown-menu{background-color: #fff;}
        .navbar-form{margin-top: 0 !important; margin-bottom: 0 !important; box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.1);}
        .navbar-form .form-group{margin-bottom: 0;}
    }
    .app.container{padding-right: 0; padding-left: 0;}
    @media (min-width: 768px){
        .app.container{width: 100%; -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.3); box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);}
        .app.container .app-aside{overflow-x: hidden;}
        .app.container.app-aside-folded .app-aside{overflow-x: visible;}
        .app.container.app-aside-fixed .aside-wrap{left: inherit;}
        .app.container.app-aside-fixed.app-aside-folded .app-aside > ul.nav{position: absolute;}
        .app.container .app-header,
        .app.container .app-aside{max-width: 100%;}
        .app.container .app-footer-fixed{right: auto; left: auto; width: 100%; max-width: 100%;}
        .app.container.app-aside-folded .app-footer-fixed{max-width: 100%;}
    }
    @media (min-width: 992px){
        .app.container{width: 100%;}
        .app.container .app-header,
        .app.container .app-aside{max-width: 95%;}
        .app.container .app-footer-fixed{max-width: 770px;}
        .app.container.app-aside-folded .app-footer-fixed{max-width: 910px;}
    }
    @media (min-width: 1200px){
        .app.container{width: 90%;}
        .app.container .app-header,
        .app.container .app-aside{max-width: 90%;}
        .app.container .app-footer-fixed{max-width: 970px;}
        .app.container.app-aside-folded .app-footer-fixed{max-width: 1110px;}
    }
    @media (min-width: 1440px){
        .app-aside,
        .navbar-header{width: 203px;}
        .navbar-collapse,
        .app-content,
        .app-footer{margin-left: 203px;}
        .app .app-aside .aside-wrap{width: 203px;overflow: hidden;}
        .app.container{width: 1370px;}
        .app.container .app-header,
        .app.container .app-aside{max-width: 1370px;}
        .app.container .app-footer-fixed{max-width: 970px;}
        .app.container.app-aside-folded .app-footer-fixed{max-width: 1110px;}
        .app.container.app-aside-fixed .app-aside .aside-wrap{width: 203px;}
        .app-aside-fixed .aside-wrap .navi-wrap{width: 203px;}
        .navbar-collapse,
        .app-content,
        .app-footer{margin-left: 203px;}
    }
    .nav-sub{height: 0; margin-left: -20px; overflow: hidden; opacity: 0; -webkit-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s;}
    .active .nav-sub,
    .app-aside-folded li div:hover .nav-sub,
    .app-aside-folded li:focus .nav-sub,
    .app-aside-folded li:active .nav-sub{height: auto !important; margin-left: 0; overflow: auto; opacity: 1;}
    .nav-sub-header{display: none !important;}
    .nav-sub-header a{padding: 15px 20px;}
    @media (min-width: 768px){
        .app-aside-folded .nav-sub-header{display: block !important;}
        .app-aside-folded .nav-sub-header a{padding: 15px 20px !important;}
        .app-aside-folded .navi > ul > li > a{position: relative;height: 50px;padding: 0;text-align: center;border: none;padding: 10px 10px 10px 17px !important;}
        .app-aside-folded .navi > ul > li > a span{display: none;}
        .app-aside-folded .navi > ul > li > a span.pull-right{display: none !important;}
        .app-aside-folded .navi > ul > li > a i{display: block;float: none;width: auto;margin: 0;font-size: 16px;line-height: 33px;border: none !important;}
        .app-aside-folded .navi > ul > li > a i b{left: 0 !important;}
        .app-aside-folded .navi > ul > li > a .badge,
        .app-aside-folded .navi > ul > li > a .label{position: absolute; top: 8px; right: 12px; z-index: 3;}
        .app-aside-folded .navi > ul ul{position: absolute;top: 0 !important;left: 100%;z-index: 1050;width: 200px;/* height: 0 !important; */-webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);}
        .app-aside-folded .navi li li a{padding-left: 20px !important;}
        .app-aside-folded.app-aside-fixed .app-aside > ul.nav{position: fixed; left: 80px; z-index: 1010; display: block; width: 260px; height: auto; overflow: visible; overflow-y: auto; opacity: 1; -webkit-overflow-scrolling: touch;}
        .app-aside-folded.app-aside-fixed .app-aside > ul.nav:before{position: absolute; top: 0; left: -60px; width: 60px; height: 50px; content: "";}
        .app-aside-folded.app-aside-fixed .app-aside > ul.nav a{padding-right: 20px !important; padding-left: 20px !important;}
    }
    @media (max-width: 767px){
        .app{overflow-x: hidden;}
        .app-content{-webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease;}
        .off-screen{position: absolute; top: 50px; bottom: 0; z-index: 1010; display: block !important; width: 75%; overflow-x: hidden; overflow-y: auto; visibility: visible; -webkit-overflow-scrolling: touch;}
        .off-screen + *{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1015; width: 100%; padding-top: 50px; overflow: hidden; background-color: #f0f3f4; -webkit-transform: translate3d(75%, 0, 0px); transform: translate3d(75%, 0, 0px); -webkit-transition: -webkit-transform 0.2s ease; -moz-transition: -moz-transform 0.2s ease; -o-transition: -o-transform 0.2s ease; transition: transform 0.2s ease; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden;}
        .off-screen + * .off-screen-toggle{position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1020; display: block !important;}
        .off-screen.pull-right{right: 0;}
        .off-screen.pull-right + *{-webkit-transform: translate3d(-75%, 0, 0px); transform: translate3d(-75%, 0, 0px);}
    }
    @media (min-width: 992px){
    }
    .fixBackgroundImage{ position: relative; background: url(../images/bg.spring.jpg); background-position: center; background-attachment: fixed; }
    .fixBackgroundImage > * {display:block;z-index: 10;}
    .fixBackgroundImage:after { position: absolute; z-index: 1; bottom: 0; left: 0; top: 0; right: 0; content: ""; display: block; background: #2b252b; opacity: .8; }